<template>
  <!-- 精简评论 -->
  <view class="comment-limt-container" v-if="!isShowAllComment">
    <view class="comment-title">精简评论</view>
    <block v-for="(item, index) in commentList.slice(0, 2)" :key="index">
      <!-- item 项组件 -->
      <article-comment-item :data="item.info" />
    </block>
    <view class="show-more" @click="onMoreClick">查看更多评论</view>
  </view>
  <!-- 全部评论 -->
  <view class="comment-all-container" v-else>
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="{
        use: false
      }"
      @up="upCallback"
      :up="{
        textNoMore: '~ 我也是有底线的 ~'
      }"
    >
      <view class="comment-title">全部评论</view>
      <block v-for="(item, index) in commentList" :key="index">
        <!-- item 项组件 -->
        <article-comment-item :data="item.info" />
      </block>
    </mescroll-body>
    <view class="end" v-show="endInfo">-- END --</view>
  </view>
</template>

<script>
import { _getArticleCommentList } from '../../api/article'
// 2. 导入对应的 mixins
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  // 3. 注册 mixins
  name: 'article-comment-list',
  mixins: [MescrollMixin],
  props: {
    articleId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      page: 1, // 页数
      pageSize: 5, // 每页数据
      // 评论列表
      commentList: [],
      isShowAllComment: false, //是否展示全部评论
      mescroll: null,
      isInit: true,
      commentListTotal: 0, // 评论总数量
      endInfo: false
    }
  },
  created() {
    this.getArticleCommentList()
  },
  methods: {
    /**
     * 请求文章评论
     */
    async getArticleCommentList() {
      const result = await _getArticleCommentList({ articleId: this.articleId, page: this.page, size: this.pageSize })
      // 获取总数量
      this.commentListTotal = result.count
      if (this.page === 1) {
        this.commentList = result.list
      } else {
        this.commentList = [...this.commentList, ...result.list]
      }

      console.log(this.commentListTotal)
      console.log(this.commentList)
    },
    /**
     * 是否显示全部评论
     */
    onMoreClick() {
      this.isShowAllComment = true
    },
    /**
     * 首次加载
     */
    async mescrollInit() {
      await this.getArticleCommentList()
      this.isInit = false
      console.log('mescrollInit')
      // 关闭 上拉加载 && 下拉刷新动画
      this.getMescroll().endSuccess() // 在这里调用this.getMescroll就能获取到this.$refs.mescrollRef.mescroll，因为只要mescrollInit触发声明展示全部评论的模板已经被渲染
      // this.getMescroll().endBySize(this.commentList.length, this.commentListTotal)
      // 判断数据是否加载完成
    },
    /**
     * 上拉加载
     */
    async upCallback() {
      if (this.isInit) return
      this.page += 1
      await this.getArticleCommentList()
      console.log('upCallback')
      // 关闭 上拉加载 && 下拉刷新动画
      this.getMescroll().endSuccess()
      // 判断数据是否加载完成
      // 在 `mescroll` 中提供了对应的对比方法：`mescroll.endBySize(当前数据量，总数据量)`
      this.getMescroll().endBySize(this.commentList.length, this.commentListTotal)
    },
    /**
     * 返回 mescroll实例对象
     */
    getMescroll() {
      if (!this.mescroll) {
        this.mescroll = this.$refs.mescrollRef.mescroll
      }
      return this.mescroll
    },
    /**
     * 添加发表最新评论
     */
    addCommentList(data) {
      this.commentList.unshift(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-title {
  font-weight: bold;
  color: $uni-text-color-title;
  font-size: $uni-font-size-lg;
  margin: $uni-spacing-col-lg 0;
}
.comment-limt-container {
  .show-more {
    margin: $uni-spacing-col-lg;
    text-align: center;
    color: $uni-text-color-more;
    font-size: $uni-font-size-base;
  }
}
.end {
  text-align: center;
  color: $uni-text-color-grey;
}
</style>
